<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>CRUD示例</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>



<div class="table_container">
    <!--增加 开始-->
    <button class="btn btn-primary add" data-toggle="modal" data-target="#addUserModal">
        增加记录
    </button>
    <!--增加 结束-->
    <!-- 模态框（Modal） -->
    <!--  增加用户模态框  -->
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        增加用户
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" th:action="@{/user/add}" method="post">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Id</label>
                            <div class="col-sm-10">
                                <input name="id" class="form-control" type="text" placeholder="请输入用户Id" autofocus>
                            </div>
                            <br><br>
                            <label class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10">
                                <input name="name" class="form-control" type="text" placeholder="请输入用户姓名">
                            </div>
                            <br><br>
                            <label class="col-sm-2 control-label">Age</label>
                            <div class="col-sm-10">
                                <input name="age" class="form-control" type="text" placeholder="请输入用户年龄">
                            </div>
                            <br><br>
                            <label class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input name="email" class="form-control"type="text" placeholder="请输入用户邮箱">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="submit" class="btn btn-primary user_save_btn">
                                提交更改
                            </button>
                        </div>
                    </form>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!--表格 开始-->
    <table class="table">
        <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Email</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user, stat : ${page.records}">
            <th scope="row" th:text="${stat.count}">1</th>
            <th th:text="${user.id}">1</th>
            <td th:text="${user.name}">Mark</td>
            <td th:text="${user.age}">Otto</td>
            <td>[[${user.email}]]</td>
            <td>
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#updateUserModal">修改</button>
                <a th:href="@{/user/delete/{id}(id=${user.id},pn=${page.current})}" type="button" class="btn btn-danger">删除</a>
            </td>
            <!--  修改用户模态框  -->
            <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="updateUserModalLabel">
                                修改用户
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" th:action="@{/user/update/{pn}(pn=${page.current})}" method="post">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Id</label>
                                    <div class="col-sm-10">
                                        <input name="id" class="form-control" type="text" th:value="${user.id}" autofocus>
                                    </div>
                                    <br><br>
                                    <label class="col-sm-2 control-label">Name</label>
                                    <div class="col-sm-10">
                                        <input name="name" class="form-control" type="text" th:value="${user.name}">
                                    </div>
                                    <br><br>
                                    <label class="col-sm-2 control-label">Age</label>
                                    <div class="col-sm-10">
                                        <input name="age" class="form-control" type="text" th:value="${user.age}">
                                    </div>
                                    <br><br>
                                    <label class="col-sm-2 control-label">Email</label>
                                    <div class="col-sm-10">
                                        <input name="email" class="form-control"type="text" th:value="${user.email}">
                                    </div>
                                </div>
                                <br><br>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                    </button>
                                    <button  type="submit" class="btn btn-primary user_save_btn">
                                        提交更改
                                    </button>
                                </div>
                            </form>
                        </div>

                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

        </tr>
        </tbody>
    </table>
    <!--表格 结束-->

    <p style="font-size: 16px; line-height: 40px">当前第 [[${page.current}]] 页 总计 [[${page.pages}]] 页 共 [[${page.total}]] 条记录</p>

    <!--分页 开始-->
    <nav class="paginationNav" aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" th:href="@{/(pn=${page.current == 1 ? page.pages : page.current - 1})}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li th:class="${num == page.current ? 'page-item active': 'page-item'}" th:each="num:${#numbers.sequence(1, page.pages)}">
                <a class="page-link" th:href="@{/(pn=${num})}">[[${num}]]</a>
            </li>
            <li class="page-item">
                <a class="page-link" th:href="@{/(pn=${page.current == page.pages ? 1 : page.current + 1})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <!--分页 结束-->
</div>

<script type="text/javascript">
    $('.user_save_btn').click(() => {
        $('.modal').modal('hide');
    })
</script>

</body>
<style>
    .table_container {
        width: 800px;
        margin: 30px auto;
    }
    .paginationNav {
        width: 40%;
        margin: 0 auto;
    }
</style>
</html>